﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Semantic Markup Demo: Cross Browser</title>
    <link href="./css/html5reset.css" rel="stylesheet" type="text/css" />
    <link href="./css/style.css" rel="stylesheet" type="text/css" />
    <link href="./css/main.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
        <script src="./js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        <hgroup>
            <h1>
                Page Header</h1>
            <h2>
                Page Sub Heading</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <article>
        <header>
            <h1>
                Article Heading</h1>
            <time datetime="2012-06-29" pubdate>Jun 29th, 2012</time>
            <a>Tag:</a><mark draggable="true">Some</mark>
        </header>
        <p>
            Content text.</p>
        <hr />
        <section>
            <header>
                <h1>
                    &nbsp;&nbsp;Section Heading
                    <m>H1</m>
                </h1>
            </header>
            <p>
                &nbsp;&nbsp;Content text part 1.</p>
            <h2>
                &nbsp;&nbsp;&nbsp;&nbsp;Section Heading H2</h2>
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;Content text part 2.</p>
            <h3>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Section Heading H3</h3>
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content text part 3.</p>
            <figure>
                <img src="./img/word.gif" alt="word">
                <img src="./img/xls.gif" alt="excel">
                <img src="./img/pdf.gif" alt="pdf">
                <img src="./img/user.png" alt="pdf">
                <figcaption>FigCaption</figcaption>
            </figure>
            <hgroup>
            </hgroup>
            <footer>
                <p>
                    <a href="###">关键字</a> Section Footer: text</p>
            </footer>
        </section>
        <hr />
        <footer>
Article Footer
</footer>
    </article>
    <aside>
        <header>
            <h1>
                Siderbar Heading</h1>
        </header>
        <hr />
        <h2>Html5 Demo</h2>
        <ul>
            <li><a href="demo/layout.htm" target="_blank" >demo/layout.htm</a></li>
            <li><a href="demo/blog.htm" target="_blank">demo/blog.htm</a></li>
            <li><a href="demo/control.htm" target="_blank">demo/control.htm</a></li>
            <li><a href="demo/canvas.htm" target="_blank">demo/canvas.htm</a></li>
            <li><a href="demo/dragdrop.htm" target="_blank">demo/dragdrop.htm</a></li>
            <li><a href="demo/edit.htm" target="_blank">demo/edit.htm</a></li>
            <li><a href="demo/localData.htm" target="_blank">demo/localData.htm</a></li>
            <li><a href="demo/data%20attributes.htm">demo/data attributes.htm</a></li>
            <li><a href="demo/media.htm" target="_blank">demo/media.htm</a></li>
            <li><a href="demo/thread.htm" target="_blank">demo/thread.htm</a></li>
            <li><a href="demo/thread-fibonacci.htm" target="_blank">demo/thread-fibonacci.htm</a></li>
        </ul>
    </aside>
    <footer>
Page Footer
</footer>
</body>
</html>
